I have a div inside an asp.net repeater. I would like to handle an event on the client side when a user clicks on one of the div's.
I've tried the onClick handler in the div (class="result"), but that doesn't seem to be firing. Is there another event I can tie this too?
I also try creating an event handler using jquery, but I'm not sure how to select the element that the user clicks. Right now, I seem to be tying the event to all the div's. Any idea how I can fix the jquery selector for the a single div element?
My repeater:
<div id="search-results" >
<asp:Repeater ID="pageResults" runat="server" ItemType="ArchiveViewer.Logic.PageResult"
SelectMethod="GetSearchResults" OnItemDataBound="pageResults_ItemDataBound" >
<ItemTemplate>
<div class="result" data-pageid="<%#:Item.PageId %>" data-pageNumber="<%#:Item.Number %>"
onclick="resultSelected" >
<div>
Page: <%#:Item.Number %>
</div>
<div>
<asp:Label ID="lblSearchResult" runat="server" ></asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
And my jquery scripts:
$('#search-results div').click(function (e) {
$(this).removeClass('active');
$(this).addClass('active');
// this is setting the active class for all the div's in the repeater...
});
var resultSelected = function () {
// this is not working
};
Anonymous User
22-Dec-2014There are a few things you need to change to make this work. Your repeater produces html similar to this:
You need to remove the active class on all divs, but only add it to the clicked div:
$("#search-results div.result").click(function(){
resultSelected = function(){$("div").removeClass("active");
$(this).addClass("active");
});
console.log("clicked, but don't really need this...");
}
If you wanted to add the onclick handler to the html you need to change it to be calling a function via () at the end of the name. You also need to change the script to declare the function without defining it as a var. There is no reason to do this though if you are using jQuery.
Anurag Sharma
22-Dec-2014Your first jQuery script actually looks OK... except all it will ever do is apply the class active to a div. So when you click a 2nd div, now you have two divs with class active, and a 3rd you have three, etc...
What you want to do is clear out all the other active classes when you click:
$('#search-results div').click(function (e) {$('#search-results div').each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
});
This would be essentially the same as if you just applied a click event to all the divs with class="result". You'll be better off removing the inline onclick that you have in your repeater divs. Then you can call subsequent functions like:
$('#search-results div.result').on('click', function () {
//add the active class and click handler
var getHighlightResults = function (pageNumber) {
var activeDivAction = function(activeDiv) {var pageNumber = ($(this).attr('data-pageNumber'));
console.log('Fetched ' + pageNumber);
if (pageNumber != null) {
$('#search-results div.result').each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
getHighlightResults(pageNumber); //call getHighlightResults with pageNumber
activeDivAction(this); // call activeDivAction passing the div that was clicked
}
});
// Do some stuff
console.log('inside getHighlightResults for ' + pageNumber);
};
var pageNumber = ($(activeDiv).attr('data-pageNumber'));
console.log('inside activeDivAction for ' + pageNumber);
};